<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记事本</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }
    .toolbar {
      background-color: #f0f0f0;
      padding: 10px;
      border-bottom: 1px solid #ddd;
      display: flex;
      gap: 10px;
    }
    .btn {
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }
    .btn:hover {
      background-color: #f5f5f5;
      border-color: #ccc;
    }
    .btn:active {
      background-color: #e5e5e5;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #fff;
      min-width: 160px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
      z-index: 1;
      border-radius: 4px;
    }
    .dropdown-content a {
      color: #333;
      padding: 10px;
      text-decoration: none;
      display: block;
      cursor: pointer;
    }
    .dropdown-content a:hover {
      background-color: #f5f5f5;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
    .editor {
      flex: 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
    }
    #notepad {
      width: 100%;
      height: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      resize: none;
      font-family: 'Consolas', monospace;
      font-size: 16px;
      line-height: 1.5;
    }
    .status-bar {
      background-color: #f0f0f0;
      padding: 5px 10px;
      border-top: 1px solid #ddd;
      font-size: 12px;
      color: #666;
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <div class="dropdown">
      <button class="btn">文件</button>
      <div class="dropdown-content">
        <a onclick="newFile()">新建</a>
        <a onclick="openFile()">打开</a>
        <a onclick="saveFile()">保存</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="btn">编辑</button>
      <div class="dropdown-content">
        <a onclick="document.execCommand('cut')">剪切</a>
        <a onclick="document.execCommand('copy')">复制</a>
        <a onclick="document.execCommand('paste')">粘贴</a>
        <a onclick="selectAll()">全选</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="btn">视图</button>
      <div class="dropdown-content">
        <a onclick="changeFontSize('+')">放大</a>
        <a onclick="changeFontSize('-')">缩小</a>
        <a onclick="toggleWordWrap()">自动换行</a>
      </div>
    </div>
  </div>
  
  <div class="editor">
    <textarea id="notepad" spellcheck="false"></textarea>
  </div>
  
  <div class="status-bar">
    <div id="stats">字符数: 0 | 行数: 1</div>
    <div id="modified">未修改</div>
  </div>

  <script>
    // 获取SDK
    const AppSDK = window.AppSDK || {};
    
    // 元素引用
    const notepad = document.getElementById('notepad');
    const stats = document.getElementById('stats');
    const modified = document.getElementById('modified');
    
    // 状态
    let isModified = false;
    let currentFileName = '未命名.txt';
    let fontSize = 16;
    let wordWrap = true;
    
    // 初始化
    async function init() {
      // 加载之前的内容
      loadContent();
      
      // 添加事件监听
      notepad.addEventListener('input', () => {
        updateStats();
        setModified(true);
      });
      
      // 初始状态更新
      updateStats();
    }
    
    // 更新统计信息
    function updateStats() {
      const text = notepad.value;
      const charCount = text.length;
      const lineCount = text.split('\n').length;
      
      stats.textContent = `字符数: ${charCount} | 行数: ${lineCount}`;
    }
    
    // 设置修改状态
    function setModified(status) {
      isModified = status;
      modified.textContent = status ? '已修改' : '未修改';
    }
    
    // 新建文件
    async function newFile() {
      if (isModified && notepad.value.trim() !== '') {
        if (!confirm('当前文件未保存，是否继续？')) {
          return;
        }
      }
      
      notepad.value = '';
      currentFileName = '未命名.txt';
      updateStats();
      setModified(false);
      
      // 保存状态
      saveContent();
    }
    
    // 打开文件
    async function openFile() {
      if (AppSDK.openFile) {
        try {
          const file = await AppSDK.openFile({
            accept: '.txt'
          });
          
          if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
              notepad.value = e.target.result;
              currentFileName = file.name;
              updateStats();
              setModified(false);
              
              // 保存状态
              saveContent();
            };
            reader.readAsText(file);
          }
        } catch (error) {
          console.error('打开文件失败:', error);
          alert('打开文件失败');
        }
      } else {
        alert('当前环境不支持打开文件');
      }
    }
    
    // 保存文件
    async function saveFile() {
      if (AppSDK.saveFile) {
        try {
          const text = notepad.value;
          const blob = new Blob([text], { type: 'text/plain' });
          await AppSDK.saveFile(blob, currentFileName);
          setModified(false);
        } catch (error) {
          console.error('保存文件失败:', error);
          alert('保存文件失败');
        }
      } else {
        alert('当前环境不支持保存文件');
      }
    }
    
    // 保存内容到存储
    async function saveContent() {
      if (AppSDK.setData) {
        try {
          await AppSDK.setData('notepad_content', {
            text: notepad.value,
            fileName: currentFileName,
            fontSize,
            wordWrap
          });
        } catch (error) {
          console.error('保存内容失败:', error);
        }
      }
    }
    
    // 从存储加载内容
    async function loadContent() {
      if (AppSDK.getData) {
        try {
          const data = await AppSDK.getData('notepad_content');
          if (data) {
            const content = JSON.parse(data);
            if (content) {
              notepad.value = content.text || '';
              currentFileName = content.fileName || '未命名.txt';
              fontSize = content.fontSize || 16;
              wordWrap = content.wordWrap !== undefined ? content.wordWrap : true;
              
              // 应用设置
              notepad.style.fontSize = `${fontSize}px`;
              notepad.style.whiteSpace = wordWrap ? 'pre-wrap' : 'pre';
              
              updateStats();
              setModified(false);
            }
          }
        } catch (error) {
          console.error('加载内容失败:', error);
        }
      }
    }
    
    // 全选
    function selectAll() {
      notepad.select();
    }
    
    // 改变字体大小
    function changeFontSize(direction) {
      if (direction === '+') {
        fontSize = Math.min(fontSize + 2, 36);
      } else {
        fontSize = Math.max(fontSize - 2, 12);
      }
      
      notepad.style.fontSize = `${fontSize}px`;
      saveContent();
    }
    
    // 切换自动换行
    function toggleWordWrap() {
      wordWrap = !wordWrap;
      notepad.style.whiteSpace = wordWrap ? 'pre-wrap' : 'pre';
      saveContent();
    }
    
    // 当窗口关闭前
    window.addEventListener('beforeunload', () => {
      if (isModified) {
        saveContent();
      }
    });
    
    // 初始化
    init();
  </script>
</body>
</html> 